<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task36 听指令的小方块（四）</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        font-family: Microsoft Yahei;
    }

    .clear_border {
        border: none;
    }
    #preView{
        display: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    
    li {
        list-style: none;
        margin:20px 5px;
    }
    
    td {
        text-align: center;
        font-weight: bold;
        border: 1px solid #eee;
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        background-color: #fff;
    }
    
    .wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    
    .table {
        flex-shrink: 0;
    }
    
    canvas{
        position: absolute;
        z-index: -1;
    }

    .robot-box {
        transition: top 1s,left 1s,transform 0.9s;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50px;
        left: 50px;
        transform: rotate(0deg);
        background: url(box.jpg) no-repeat 40% 40%;
    }
    
    .command-part {
        margin: 10px 10px;
    }
    
    .command-part-display {
        display: flex;
        overflow: hidden;
    }
    
    .command-part-button {
        display: flex;
        justify-content: space-around;
    }
    
    .command-part-display-count {
        background-color: #2C3E50;
        color: #fff;
        height: 500px;
    }
    
    .command-part-display-count li {
        display: block;
        width: 40px;
        text-align: center;
    }
    
    #command_input {
        border: none;
        font-family: Microsoft Yahei;
        background-color: #34495E;
        color: rgb(0, 255, 0);
        resize: none;
        font-size: 16px;
        min-height: 500px;
        width: 300px;
        max-height: 500px;
    }
    
    input[type="button"] {
        padding:20px;
        background-color:#6289AF;
        border:none;
        color:#fff;
        cursor:pointer;
    }
    
    .command-rules {
        align-self: center;
    }
    </style>
</head>

<body>
    <section class="wrapper">
        <section class="table" id="wrap">
            <table id="table"></table>
            <!-- <div class="robot-box" id="robot_box"></div> -->
        </section>
        <ul class="command-rules">
            <li><input type="file" id="file-input" ></li>
            <!-- <li><input type="text" id="setNum" placeholder="输入模糊程度(数字5-20)"></li> -->
            <li><input type="text" id="setSpeed" placeholder="输入打印速度(1000=1秒)"></li>
            <li>先上传图片再点击下方按钮。</li>
            <li>图片像素要求100X50以上</li>
            <li><input type="button" id="startDraw" value="开始画画" onclick="draw(10,200)"></li>
        </ul>
        <!-- <section class="command-part"> -->
            <!-- <section class="command-part-button">
                <input type="button" id="command_button" value="执行">
                <input type="button" id="clean_buttun" value="清空">
                <input type="button" id="refresh_button" value="刷新">
            </section> -->
            <table id="preView"></table>
            
        <!-- </section> -->
        
    </section>
    <script type="text/javascript" src="task36.js"></script>
</body>

</html>
